<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>查看采购单</span>
          </div>
          <div class="main_crumbs_rt">
            <el-button v-repeatClick>打印</el-button>
            <el-button v-repeatClick @click="exportPurchaseInfo"
              >导出</el-button
            >
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li>
              采购单号：<span>{{ info.order_sn }}</span>
            </li>
            <li>
              采购方式：<span>{{ base.mode[info.mode] }}</span>
            </li>
            <li>
              采购员/供应商：<span>{{
                info.mode == 1
                  ? base.buyer[info.buyer_id]
                  : base.supplier[info.supplier_id]
              }}</span>
            </li>
            <li>
              类型：<span>{{ base.type[info.type] }}</span>
            </li>
            <li>
              单据状态：<span>{{ base.status[info.status] }}</span>
            </li>
            <li>
              采购日期：<span>{{
                parseTime(info.purchase_time, "{y}-{m}-{d}")
              }}</span>
            </li>
            <li>
              需采购品种：<span>{{ info.all }}</span>
            </li>
            <li>
              已采购品种：<span>{{ info.ed }}</span>
            </li>
            <li>
              采购金额：<span>{{ info.money }}</span>
            </li>
            <li class="main_w100">
              总计：<span class="main_xq_red">{{ info.money_all }}</span>
            </li>
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>其他</div>
        </div>
        <div class="main_xq">
          <ul class="boxha">
            <li class="main_w100">
              其他费用：<span>{{ info.other_money | other_money }}</span>
            </li>
            <li class="main_w100">
              备注：<span>{{ info.remark }}</span>
            </li>
            <li class="main_w100 box">
              上传的相关凭证：
              <span class="box main_xqi">
                <div
                  class="main_xqi_i"
                  v-for="(pics, index) in info.pics"
                  :key="index"
                >
                  <el-image
                    fit="fill"
                    :src="pics"
                    :preview-src-list="info.pics"
                  >
                    <div slot="error" class="image-slot">
                      <img :src="puzzleImg" />
                    </div>
                  </el-image>
                </div>
              </span>
            </li>
          </ul>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
        </div>
        <div class="main_table marginTop0" style="min-height: 230px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="info.purchase_list"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column label="序号" prop="goods.name">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="name"
              class-name="main_hei"
            />
            <el-table-column
              label="单位"
              prop="spu_name"
              class-name="main_hei"
            />
            <el-table-column
              label="状态"
              prop="purchase_price"
              class-name="main_hei"
            >
              <template slot-scope="scope">{{
                scope.row.status == 0 ? "采购中" : "采购完成"
              }}</template>
            </el-table-column>
            <el-table-column
              label="需采量"
              prop="purchase_num"
              class-name="main_hei"
            />
            <el-table-column
              label="已采量"
              prop="purchased_num"
              class-name="main_hei"
            />
            <el-table-column
              label="未采量"
              prop="un_purchase_num"
              class-name="main_hei"
            />
            <el-table-column
              label="采购均价"
              prop="price"
              class-name="main_hei"
            />
            <el-table-column
              label="采购金额"
              prop="price"
              class-name="main_hei"
            >
              <template slot-scope="scope">{{
                parseFloat(scope.row.purchased_num) *
                parseFloat(scope.row.price)
              }}</template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" class-name="main_hei" />
          </el-table>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l marginLeft0"><em></em>生命周期</div>
        </div>
        <div class="main_table marginTop0" style="min-height: 230px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="info.logs"
            element-loading-text="加载中"
            fit
            highlight-current-row
          >
            <el-table-column
              label="管理员"
              prop="admin.name"
              class-name="main_hei"
            />
            <el-table-column
              label="操作"
              prop="operate.name"
              class-name="main_hei"
            />
            <el-table-column label="内容" prop="content" class-name="main_hei">
              <template slot-scope="scope">
                <div
                  v-for="(content, index) in scope.row.content"
                  :key="index"
                  class="marginTop5 marginBottom5"
                >
                  {{ content }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="IP" prop="ip" class-name="main_hei" />
            <el-table-column
              label="时间"
              prop="created_at"
              class-name="main_hei"
            >
              <template slot-scope="scope">{{
                parseTime(scope.row.created_at, "{y}-{m}-{d}")
              }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getLodop } from "@/utils/LodopFuncs";
import {
  purchase_info,
  purchase_base,
  export_purchase_info,
} from "@/api/purchasing/purchasingPurchase";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import { puzzleImg } from "@/api/currency";

export default {
  computed: {
    ...mapGetters(["avatar"]),
  },
  filters: {
    other_money(data) {
      let zf = "";
      if (data) {
        JSON.parse(data).map((e) => {
          zf += "描述:" + e.descr + ",金额:" + e.money + "；";
        });
      }
      return zf;
    },
  },
  components: {},
  data() {
    return {
      // 时间
      parseTime,
      // 基本信息
      info: {
        pics: [],
        purchase_time: "2020-01-01",
      },
      base: {
        mode: ["自采"],
        buyer: ["自采"],
        supplier: ["自采"],
        type: ["自采"],
        status: ["自采"],
      },
      puzzleImg,
      listLoading: false,
      // id
      id: this.$route.params.id,
    };
  },
  created() {
    // 基本信息
    this.purchase_base();
    this.purchase_info();
  },
  methods: {
    // 基本信息
    purchase_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      purchase_info(data).then((res) => {
        if (res.errcode == 0) {
          res.data.info.pics = res.data.info.pics
            ? res.data.info.pics.split(",").map((e) => {
                return this.avatar.domain + e;
              })
            : [];
          this.info = res.data.info;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    purchase_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      purchase_base(data).then((res) => {
        if (res.errcode == 0) {
          this.base = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 导出
    exportPurchaseInfo() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      export_purchase_info(data)
        .then((res) => {
          const link = document.createElement("a");
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
          .main_xqi_i {
            position: relative;
            width: 120px;
            overflow: hidden;
          }
          /deep/.el-image .el-image__inner {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
          /deep/.el-image .image-slot img {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>
